import React, { Component } from 'react'

/*
    在 react 中子组件想给父组件传递值，其实本质上还是父组件给子组件传递内容
    只是传递的是一个函数，子组件直接调用父组件传递过来的函数，且给一个参数即可

    子传父：
        1. 在父组件中定义一个接收参数的方法
            getData = (val) => {
                console.log('666666 父组件只接收：', val);
            }

        2. 将该方法传递给子组件
            <Header fn={this.getData} />

        3. 子组件触发该方法传递数据
            props.fn('在大大的花园里面剪呀剪')
*/

const Header = (props) => {

    console.log(props);

    // 3. 在子组件中，特定的时间或者情况去执行函数给父组件传递内容
    props.fn('在大大的花园里面剪呀剪')

    return (<>
        <div> 没有不变了承诺 </div>
    </>)
}


class Content extends Component {

    render() {

        this.props.fn()

        return (
            <div>只有说不完的谎言。 </div>
        )
    }
}



export default class App extends Component {

    // 1. 父组件中定义一个接收函数，用来接收子组件传递值用的方法
    getData = (val) => {
        console.log('666666 父组件只接收：', val);
    }

    render() {
        return (
            <div>
                {/* 2. 将自定义的接收函数传递给子组件 */}
                <Header fn={this.getData} />

                <Content fn={this.getData} />
            </div>
        )
    }
}
